<template>
  <div id="userLogin">
    <h1 class="title">葵智能图库--用户登录</h1>
    <a-form class="form" :model="formState" name="basic" autocomplete="off" @finish="onsubmit">
      <a-form-item name="userAccount" :rules="[{ required: true, message: '请输入你的账号' }]">
        <a-input
          class="input"
          v-model:value="formState.userAccount"
          placeholder="请在这里输入你的账号"
        />
      </a-form-item>

      <a-form-item name="userPassword" :rules="[{ required: true, message: '请输入你的密码!' }]">
        <a-input-password
          class="input"
          v-model:value="formState.userPassword"
          placeholder="请在这里输入你的密码"
        />
      </a-form-item>
      <a-form-item>
        <div>
          <a-button class="button" type="primary" html-type="submit">登录</a-button>
          <router-link to="/user/register">
            <a-button class="button" type="primary">注册</a-button>
          </router-link>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import { userLoginUsingPost } from '@/api/yonghujiekou.ts'
import { userLoginUserInfo } from '@/stores/userLoginUserInfo.ts'
import router from '@/router'
import { message } from 'ant-design-vue'

const current = userLoginUserInfo()

//  表单
interface FormState {
  userAccount: String
  userPassword: String
}

//  表单
const formState = reactive<FormState>({
  userAccount: '',
  userPassword: '',
})
//  登录
const onsubmit = async (values: any) => {
  const res = await userLoginUsingPost(values)
  if (res.data.code === 0 && res.data.data) {
    router.replace({
      path: '/',
    })
    message.success('登录成功')
    await current.fetchLoginUser()
  } else {
    message.error('登录失败' + res.data?.message)
  }
}
</script>
<style scoped>
#userLogin {
  margin: 0;
  padding: 0;
}

.title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 10px;
}

.tips {
  text-align: center;
  margin-top: 5px;
  margin-bottom: 15px;
  color: #bbb;
}

.form {
  margin: 0 auto;
  text-align: center;
}

.input {
  width: 280px;
}

.button {
  margin: 0 15px;
}
</style>
